<template>
  <div>
    <el-card>
      <el-button type="primary" :icon="Plus" @click="addMenu" v-hasBtn="'addMenu'"
        >添加菜单</el-button
      >
    </el-card>
    <el-card class="card">
      <el-table border v-loading="isloading" :data="menuList">
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column
          width="120"
          label="菜单名称"
          align="center"
          prop="menuName"
        ></el-table-column>
        <el-table-column
          width="150"
          label="菜单值"
          align="center"
          prop="menuValue"
        ></el-table-column>
        <el-table-column
          label="菜单描述"
          align="center"
          prop="menuContent"
        ></el-table-column>
        <el-table-column label="创建时间" align="center" width="180">
          <template #default="{ row }">
            {{ formatDate(row.CreateAt) }}
          </template>
        </el-table-column>
        <el-table-column label="修改时间" align="center" width="180">
          <template #default="{ row }">
            {{ formatDate(row.UpdateAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="170">
          <template #default="{ row }">
            <el-button
              type="info"
              :icon="Edit"
              size="small"
              @click="updateMenu(row._id)"
              v-hasBtn="'updateMenu'"
              >编辑</el-button
            >
            <el-popconfirm :title="`你确定删除${row.menuName}吗?`" @confirm="deleteMenu(row._id)" >
              <template #reference>
                <el-button type="danger" :icon="Delete" size="small" v-hasBtn="'deleteMenu'"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="page"
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 30, 40]"
        background
        layout="jumper,prev, pager, next,total, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <AddMenu
      v-model="isShowDialog"
      v-model:menuId="menuId"
      :menuId="menuId"
      @getMenuList="getMenuList"
    ></AddMenu>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { getMenuListAPI , deleteMenuAPI } from "@/api/menu";
import { Plus, Delete, Edit } from "@element-plus/icons-vue";
import { formatDate } from "@/utiles/time";
import AddMenu from "./AddMenu/index.vue";
import { ElMessage } from "element-plus";
defineOptions({
  name: "MenuManger",
});
let isloading = ref(false);
let isShowDialog = ref(false);
let menuList = ref([]);
let pageNo = ref(1);
let pageSize = ref(10);
let total = ref(0);
let menuId = ref("");
const handleSizeChange = () => {
  getMenuList();
};
const handleCurrentChange = () => {
  getMenuList();
};
onMounted(() => {
  getMenuList();
});
const getMenuList = async () => {
  isloading.value = true;
  let result = await getMenuListAPI(pageNo.value, pageSize.value);
  menuList.value = result.data.list;
  total.value = result.data.total;
  isloading.value = false;
};
const addMenu = () => {
  isShowDialog.value = true;
};
const updateMenu = (id) => {
  isShowDialog.value = true;
  menuId.value = id;
  console.log(menuId.value);
};
const deleteMenu = async (id)=>{
  let result = await deleteMenuAPI(id);
  if(result.code == 200) {
    getMenuList();
    ElMessage.success('删除成功')
  }
}
</script>
<style lang="scss" scoped>
.card {
  margin-top: 10px;
  .page {
    margin: 10px 0px;
    display: flex;
    justify-content: center;
  }
}
</style>
